import React, { Component } from 'react'
import type { CateGoryList } from '@/types/cateGory'
import { getCateGory } from '@/api/category'
import classNames from 'classnames'

import styles from './index.module.scss'
export default class CateGory extends Component {
  state = {
    cateInfo: [] as CateGoryList[],
    cateInfoRight: [] as CateGoryList[],
    cateIndex: 0 //点击高亮索引
  }

  componentDidMount (): void {
    this.getCateGoryListData()
  }

  getCateGoryListData = async () => {
    const res = await getCateGory()
    this.setState(
      {
        cateInfo: res.data,
        cateInfoRight: res.data[0]!.children
      },
      () => {
        console.log(this.state.cateInfoRight)
      }
    )
  }

  change = (index: number) => {
    this.setState({
      cateIndex: index,
      cateInfoRight: this.state.cateInfo[index].children
    })
    // console.log(index)
    // console.log(this.state.cateInfoRight)
  }

  render () {
    return (
      <div className={styles.scrollContainer}>
        <div className={styles.leftScroll}>
          {this.state.cateInfo.map((item, index) => {
            return (
              <div
                className={classNames(styles.leftScrollItem, {
                  [styles.active]: this.state.cateIndex === index
                })}
                key={item.cat_id}
                onClick={() => {
                  this.change(index)
                }}
              >
                {item.cat_name}
              </div>
            )
          })}
        </div>
        <div className={styles.rightScroll}>
          {this.state.cateInfoRight &&
            this.state.cateInfoRight.map(item => {
              return (
                <div key={item.cat_id}>
                  <div className={styles.cateLv2Title}>{item.cat_name}</div>
                  <div className={styles.cateLv3List}>
                    {item.children?.map(subItem => {
                      return (
                        <div
                          key={subItem.cat_id}
                          className={styles.cateLv3Item}
                        >
                          <img src={subItem.cat_icon} />
                          <span className={styles.name}>
                            {subItem.cat_name}
                          </span>
                        </div>
                      )
                    })}
                  </div>
                </div>
              )
            })}
          {!this.state.cateInfoRight && (
            <div className={styles.none}>
              <img
                src='https://img01.yzcdn.cn/vant/empty-image-default.png'
                alt=''
              />
              <div>暂无分类</div>
            </div>
          )}
        </div>
      </div>
    )
  }
}
